<template>
  <view>
    <form>
      <view class="cu-form-group">
        <view class="title">头像</view>
        <u-image v-if="params.headImgUrl" width="74rpx" height="74rpx" border-radius="100%" :src="params.headImgUrl"
          class="mr5" />
        <image v-else src="/static/common/head.png" style="width: 74rpx;height: 74rpx;border-radius: 100%;"
          class="mr5" />
      </view>
      <view class="cu-form-group">
        <view class="title">微信昵称</view>
        <input placeholder="输入昵称" v-model="params.nickname" disabled />
      </view>
      <view class="cu-form-group">
        <view class="title">真实姓名</view>
        <input placeholder="输入真实姓名" v-model="params.realname" />
      </view>

      <view class="cu-form-group">
        <view class="title">手机号码</view>
        <input placeholder="输入手机号码" v-model="params.phone" disabled />
        <button class='cu-btn bg-blue shadow' open-type="getPhoneNumber" @getphonenumber="onGetPhone"
          lang="zh_CN">更新</button>
      </view>

      <view class="cu-form-group">
        <view class="title">UserId</view>
        <input placeholder="输入真实姓名" v-model="params.id" disabled />
      </view>


      <view class="cu-form-group margin-top">
        <view class="title">性别</view>
        <picker @change="onGenderChange" :value="params.sex" :range="genderArr">
          <view class="picker">
            {{genderArr[params.sex]}}
          </view>
        </picker>
      </view>
    </form>


    <view class="btn-group">
      <u-button type="success" @click="onSave">保存</u-button>
      <u-gap height="25"></u-gap>
      <u-button type="warning" @click="onDelete">注销</u-button>
    </view>
  </view>
</template>

<script>
  import {
    genderStatus
  } from '@/utils/consts'

  export default {
    data() {
      return {
        errorType: ['toast'],
        params: {
          nickname: '',
          sex: null,
          phone: '',
          realname: ''
        },
        index: 0,
        showGender: false,
        genderArr: ['保密',
          '男', '女',
        ]
      }
    },
    computed: {
      genderText() {
        if (this.params.sex === genderStatus.male) return '男'
        if (this.params.sex === genderStatus.female) return '女'
        if (this.params.sex === genderStatus.secrecy) return '保密'
        return ''
      }
    },
    onLoad() {
      this.setInfo()
    },
    methods: {
      onGetPhone(res) {
        console.log("获取到的手机号码信息:", JSON.stringify(res));
        let type = null;
        if (res.currentTarget && res.currentTarget.dataset) {
          type = res.currentTarget.dataset.type;
        }
        console.log("绑定手机号类型：", type);
        if (res.detail.encryptedData) {
          this.$store.dispatch("getSessionKey").then(
            loginRes => {
              // 调用接口更新手机号信息
              this.$api
                .wxUpdatePhone({
                  sessionKey: loginRes.sessionKey,
                  encryptedData: res.detail.encryptedData,
                  iv: res.detail.iv
                })
                .then(res => {
                  uni.showToast({
                    icon: "success",
                    title: "已更新手机号码"
                  });
                  this.updateParams({
                    phone: res.phone
                  });
                });
            },
            err => {}
          );
        }
      },
      async setInfo() {
        let res = await this.$api.getMemberInfo()
        this.params = res || {}
      },
      onUploadAdd(e) {
        let updateObj = {}
        updateObj[e.loaderId] = e.url
        this.updateParams(updateObj)
      },
      onGenderChange(e) {
        this.updateParams({
          sex: e.detail.value
        })
      },
      updateParams(updateObj) {
        this.params = Object.assign({}, this.params, updateObj)
      },
      async onSave() {
        let params = this.$xf.getTrimParams(this.params)
        try {
          this.$xf.verifyParams(params.phone, '请输入手机号码')
          this.$xf.verifyParams(
            this.$u.test.mobile(params.phone),
            '请输入正确的手机号码'
          )
          this.$xf.verifyParams(params.realname, '请输入真实姓名')
        } catch (e) {
          this.$xf.toast(e)
          return false
        }
        await this.$api.updateMemberInfo(params)
        this.$xf.resultHandler('保存成功', () => {
          uni.navigateBack()
        }, true)
      },
      async onDelete() {
        await this.$api.deleteMember()
        this.$store.dispatch('logout')
        uni.navigateBack()
      }
    }
  }

</script>

<style scoped lang="scss">
  .btn-group {
    padding: 80rpx 30rpx calc(60rpx + env(safe-area-inset-bottom));
  }

</style>
